View {
  box-sizing: border-box;
}

.box {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 160px;
  background-color: #F6F6F6;
  position: relative;

  .head {
    width: 100%;
    height: 420px;

    .head_bg {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .store {
    background: #ffffff;
    width: calc(100% - 48px);
    border-radius: 12px;
    margin: -80px 0 24px 24px;

    .store_head {
      padding: 24px;
      width: 100%;
      border-bottom: 1px solid #E5E5E5;

      .store_name {
        font-size: 30px;
        color: #333333;
        line-height: 43px;
        margin-bottom: 12px;
      }

      .store_message {
        width: 100%;
        display: flex;
        margin-bottom: 8px;

        .store_message_title {
          color: #999999;
          font-size: 24px;
          white-space: nowrap;
        }

        .store_message_text {
          color: #666666;
          font-size: 24px;
        }
      }

      .store_message:last-child {
        margin-bottom: 0;
      }
    }

    .store_operation {
      width: 100%;
      display: flex;
      align-items: center;

      .store_operation_main {
        flex: 1;
        border-right: 1px solid #F4F1F4;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px 0;

        .store_operation_main_img {
          display: block;
          width: 44px;
          height: 44px;
          object-fit: cover;
        }

        .store_operation_main_text {
          margin-left: 8px;
          color: #12B3FF;
          font-size: 22px;
        }
      }

      .store_operation_main:last-child {
        border: none;
      }
    }
  }

  .environment {
    width: 100%;
    padding: 24px;
    padding-top: 0;
    background: #ffffff;
    margin-bottom: 24px;

    .environment_main {
      width: 100%;

      .environment_main_name {
        font-size: 28px;
        color: #333333;
        font-weight: bold;
        padding: 24px 0;
        width: 100%;
      }

      .environment_main_img {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .photo {
          width: 340px;
          height: 190px;
          object-fit: cover;
          margin-bottom: 20px;
          border-radius: 12px;
        }

        .photo:nth-last-child(-n+2) {
          margin-bottom: 0;
        }
      }
    }
  }

  .evaluate {
    width: 100%;
    margin-bottom: 24px;
    background: #ffffff;

    .evaluate_name {
      width: 100%;
      padding: 24px;
      font-weight: bold;
      color: #333333;
      font-size: 28px;
      border-bottom: 1px solid #E5E5E5;
    }

    .evaluate_list {
      padding-left: 24px;

      .evaluate_detail {
        padding: 24px;
        padding-left: 0;
        border-bottom: 1px solid #E5E5E5;

        .head {
          box-sizing: border-box;
          height: auto;
          font-size: 26px;
          color: #999999;
          width: 100%;

          .head-top {
            display: flex;
            align-items: center;
            width: 100%;

            .brand-img {
              height: 44px;
              width: 44px;
              border-radius: 50%;
            }

            .car-license {
              // width: 124px;
              margin-left: 10px;
              color: #333333;
              white-space: nowrap;
              font-size: 26px;
            }

            .left {
              display: flex;
              width: calc(100% - 200px);
              align-items: center;
            }

            .left-wrap {
              width: 200px;
              display: flex;
              align-items: center;
            }

            .brand-name {
              flex: 1;
              margin-right: 10px;
              word-break: keep-all;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #999999;
              font-size: 26px;
              padding-left: 10px;
            }

            .date {
              width: 200px;
              font-size: 26px;
              color: #999999;
              text-align: right;
              white-space: nowrap;
            }
          }

          .head-bottom {
            display: flex;
            align-items: center;
            margin-top: 20px;
            margin-bottom: 24px;

            .range-text {
              color: #999999;
              font-size: 26px;
              margin-right: 12px;
            }

            .at-rate__icon--on {
              color: #FF7228;
            }
          }
        }

        .content {

          &-desc {
            color: #333333;
            font-size: 28px;
            line-height: 40px;
          }

          &-pics {
            box-sizing: border-box;
            overflow-x: scroll;
            white-space: nowrap;

            .img {
              box-sizing: border-box;
              width: calc(33.33% - 8px);
              height: 226px;
              margin-right: 12px;
              border: 1px solid #eeeeee;
              border-radius: 12px;
              margin-top: 12px;

              // &:nth-child(3n) {
              //   margin-right: 0px;
              // }
            }
          }
        }
      }

      .evaluate_detail:last-child {
        border: none;
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 134rpx;
    background: #ffffff;

    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // justify-content: center;
    .at-button {
      margin-top: 21rpx;
      width: calc(100vw - 24rpx);
    }
  }
}
